<template>
	<view class="home">
		<!-- #ifdef MP -->
		<search-slot>
			<template #left>
				<view class="xiaoxi">
					<view class="iconfont icon-xiaoxi icon-size"></view>
				</view>
			</template>
			<template #center>
				<view class="search flex-1" @click="goSearch">
					请输入要搜索的内容
				</view>
			</template>
			<template #right>
				<view class="saoma" @click="getCode">
					<view class="iconfont icon-saoma icon-size"></view>
				</view>
			</template>
		</search-slot>
		<!-- #endif -->
		<scroll-view scroll-x="true" :scroll-into-view="scrollinto" scroll-with-animation :scroll-left="scrollLeft">
			<view class="d-flex flex-nowrap title-list a-center">
				<view v-for="(item,i) in navbars" :key="i" class="flex-shrink mx-2 navbar-item" :id="'tab'+i"
					@click="changeTitle(i)" :class="currentIndex==i?'active':''">{{item.name}}</view>
			</view>
		</scroll-view>
		<swiper :style="'height:'+scrollH" :current="currentIndex" @change="changeIndex">
			<swiper-item v-for="(newItem,index) in newItems" :key="index">
				<view class="swiper-item">
					<scroll-view scroll-y="true" :style="'height:'+scrollH" @scrolltolower="scrolltolower(index)">
						<template v-if="newItem.list.length>0">
							<block v-for="(item,l) in newItem.list" :key="l">
								<!-- 	{{JSON.stringify(item)}} -->
								<template v-if="item.type == 'swiper'">
									<swiper-banner :swipers="item.data"></swiper-banner>
								</template>
								<template v-else-if="item.type == 'indexnavs'">
									<!-- [[0,1,2,3,4,5,6,7],[8,9]] -->
									<fast-nav :pagges="pagges"></fast-nav>
								</template>
								<template v-else-if="item.type == 'threeAdv'">
									<three-adv :news="item.data"></three-adv>
									<divider></divider>
								</template>
								<template v-else-if="item.type == 'oneAdv'">
									<one-adv :title="item.data.title" :cover="item.data.cover"></one-adv>
								</template>
								<template v-else="item.type == 'list'">
									<common-list :news="item.data"></common-list>
								</template>
							</block>
							<view class="py-2 text-muted text-center">
								{{newItem.loadmore}}
							</view>
						</template>
						<template v-else-if="newItem.forward=='before'">
							<view class="my-2 text-muted text-center">
								<image src="../../static/loading.gif" mode="" style="width:80rpx;height:80rpx;"></image>
							</view>
						</template>
                        <template v-else>
							<view class="my-2 text-muted text-center">暂无数据…</view>
						</template>
					</scroll-view>
				</view>
			</swiper-item>
		</swiper>
		<sk-index v-if="isShow"></sk-index>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance,
		computed
	} from 'vue'
	import {
		getHome,
		getPage
	} from '../../api/index.js'
	import {
		onNavigationBarButtonTap,
		onNavigationBarSearchInputClicked
	} from '@dcloudio/uni-app'
	var navbars = ref([])
	var currentIndex = ref(0)
	var scrollinto = ref('')
	const instance = getCurrentInstance();
	var itemWidth = ref(0)
	var scrollLeft = ref(0)
	var scrollH = ref(0)
	var newItems = ref([])
	var isShow = ref(true)
	const goSearch = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
	const getCode = () => {
		uni.scanCode({
			success: function(res) {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
			},
			error: function(error) {
				console.log('error', error);
			}
		});
	}
	onNavigationBarButtonTap((val) => {
		console.log('onReady', val)
	})
	onNavigationBarSearchInputClicked(() => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	})
	const changeTitle = (i) => {
		currentIndex.value = i;
		scrollinto.value = 'tab' + i
		scrollLeft.value = itemWidth.value * i - 160 + 'px'
		console.log('scrollLeft.value', scrollLeft.value);
	}
	const gethome = () => {
		getHome().then(res => {
			console.log('res', res);

			navbars.value = res.data.category
			for (var i = 0; i < navbars.value.length; i++) {
				var forward = i == 0 ? 'after' : 'before';
				var obj = {
					list: [],
					loadmore: '加载更多…',
					forward: forward
				}
				if (i == 0) {
					obj.list = res.data.data
				}
				newItems.value.push(obj)
				isShow.value = false
				console.log('newItems', newItems);
			}
		})
	}
	//分类下分页请求
	const getpage = (callback = false) => {
		let id = navbars.value[currentIndex.value].id;
		let obj = newItems.value[currentIndex.value]
		let page = Math.ceil(obj.list.length / 5) + 1
		obj.forward == 'before';
		getPage(id, page).then(res => {
			console.log('res', res);
			let data = res.data;
			obj.list = [...obj.list, ...data]
			obj.loadmore = data.length < 5 ? '没有更多了…' : '加载更多…'
			obj.forward = 'after';
		})
		if (typeof callback == 'function') {
			callback()
		}
	}
	//监听swiper滑动变化
	const changeIndex = (e) => {
		currentIndex.value = e.detail.current
		scrollLeft.value = itemWidth.value * e.detail.current - 160 + 'px'
		console.log('newItems.value',newItems.value);
		if(newItems.value[currentIndex.value].forward=='before'){
			getpage()
		}else {
			return;
		}
		
	}
	let pagges = computed(() => {
		let pagge = [];
		var index = currentIndex.value;
		newItems.value[index].list.forEach(item => {
			if (item.type == 'indexnavs') {
				let indexnav = Object.values(item.data);
				indexnav.forEach((v, index) => {
					// console.log('v',v,index);
					// [0,1,2,3,4,5,6,7,8,9]
					// [[0,1,2,3,4,5,6,7],[8,9]]
					var page = Math.floor(index / 8);
					if (!pagge[page]) {
						pagge[page] = []
					}
					pagge[page].push(v)
				})
			}
		})
		return pagge;
	})
	//触底
	const scrolltolower = (index) => {
		//加载中…   加载更多…   没有更多了…
		let obj = newItems.value[currentIndex.value];
		if (obj.loadmore == '没有更多了…') {
			return;
		} else {
			obj.loadmore = '加载中…';
			getpage(() => {
				uni.showToast({
					title: '加载成功'
				})
			})
		}
	}
	onMounted(() => {
		gethome()
		uni.getSystemInfo({
			success: (res) => {
				console.log('res=>', res);
				scrollH.value = res.windowHeight - uni.upx2px(176) + 'px'
			},
			fail: (err) => {
				console.log('err=>', err);
			}
		})
		setTimeout(() => {
			const query = uni.createSelectorQuery().in(instance.proxy);
			query.select(".navbar-item").boundingClientRect((data) => {
				itemWidth.value = data.width + 40
			}).exec();
		}, 1000)
	})
</script>

<style scoped>
	.search {
		height: 60rpx;
		line-height: 60rpx;
		text-indent: 20rpx;
		color: #ccc;
		background-color: #f4f4f4;
		font-size: 28rpx;
	}

	.xiaoxi,
	.saoma {
		width: 44rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
	}

	.icon-size {
		font-size: 28rpx;
	}

	.title-list {
		width: 100%;
		height: 88rpx;
		line-height: 60rpx;
		background-color: #fff;
		font-size: 28rpx;
	}
</style>